<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${ctx}/css/sapar.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/sapar.js"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/kkpager.min.js"></script>
<script type="text/javascript" src="${ctx}/js/vue.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${ctx}/css/kkpager_blue.css" />
<script type="text/javascript" src="${ctx}/js/jquery-1.10.1.js"></script>
<title>送包管理</title>
<style>
#shou {
	margin-left: 8px;
}

#yici {
	margin-left: 8px;
}
th{
text-align: center;
}
td{
text-align: center;
}
</style>
</head>

<body>
	<div id="saper-container">
		<div id="saper-hd"></div>
		<div id="saper-bd">
			<div class="subfiled clearfix">
				<h2>送包管理</h2>
			</div>
			<div class="subfiled-content" id="app">

				<div class="user_management">
				   <h3 style="text-indent:2em">▍送包管理</h3>
				   <!--表格开始-->
					<div class="table">
						<!--表格操作-->
						<div class="table-operate ue-clear">
							<a href="javascript:;" @click="add" class="add">添加</a> <a href="javascript:;"
							 @click="edit"	class="edit">修改</a> <a href="javascript:;" class="del" @click="del">删除</a>
						</div>
						<!--表格具体内容-->
						<div class="table-box">
							<table>
								<thead>
									<tr>
										<th>
										<input type="checkbox" id="checkall" name="checkall"/></th>
										<th>名字</th>
										<th>送包人</th>
									</tr>
								</thead>
								<tbody>
								<tr v-for="(item, index) in sendImList" :key="item.sendId">
									<td ><input type="checkbox" name="sendId" :value="item.sendId"/></td>
									<td>{{item.sendName}}</td>
									<td>{{item.sendPerson}}</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
					<!--表格结束-->
				</div>
				
			</div>
		</div>
		<!--分页用到的 -->
		<div id="saper-ft">
			<div id="kkpager"></div>
		</div>
	</div>
</body>
<!-- -->
<script type="text/javascript">

	var vm = new Vue({
        el: '#app',
		data:{
            sendImList: "",

		},
        created: function () {
            this.load();

        },
        methods:{
            edit:function () {
                var chk_value = getSelRecord();
                if(chk_value.length == 1){
                    layer.open(
                        {
                            type: 2,
                            title: '明细',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area : ['800px' , '620px'],
                            content: '/sendIm/editPage?sendId='+chk_value,
                        });

                }else{
                    layer.msg("请选择并只能选择一条数据！");
                }

            },
            created:function () {
                this.load();
                setInterval(function () {
                    vm.load();
                },3000)

            },
			del:function () {
                var chk_value = getSelRecord();
                if(chk_value.length > 0){
                    layer.confirm('你确定要删除么？', function(){
                        $.ajax({
                            type: "POST",
                            url:"${ctx}/sendIm/del?sendId="+chk_value.join(),
                            error: function(request) {
                                layer.alert("网络故障，请稍后再试!");
                            },
                            success: function(data) {
                                if(data.status==true){
                                    layer.alert("删除成功", function(){
                                        window.location.reload();
                                        $('input[name="sendId"]').each(function(){
                                            $("input[name='sendId']").prop('checked', false)
                                        });
                                    });
                                }else{
                                    layer.msg(data.msg);
                                }
                            }
                        });
                    });
                }else{
                    layer.msg('请选择要删除的数据！');
                }
            },

			add:function () {
                layer.open(
                    {
                        type: 2,
                        title: '明细',
                        maxmin: true,
                        shadeClose: true, //点击遮罩关闭层
                        area : ['800px' , '620px'],
                        content: '/sendIm/editPage',
                    });
            },

		    load:function () {
		        $.get("/sendIm/data",function (data) {
					if(data.status = true){
					    vm.sendImList = data.sendImList;
					}
                })

            }
		}
	})
	



	$(function(){
		<%--var totalPage = ${total};--%>
		<%--var pageNo = getParameter('pageIndex');--%>
		<%--if(!pageNo){--%>
			<%--pageNo = 1;--%>
		<%--}--%>
		<%--//生成分页--%>
		<%--//有些参数是可选的，比如lang，若不传有默认值--%>
		<%--kkpager.generPageHtml({--%>
			<%--pno : pageNo,--%>
			<%--//总页码--%>
			<%--total : totalPage,--%>
			<%--//链接前部--%>
			<%--hrefFormer : '${ctx}/equip/equipList',--%>
			<%--//链接尾部--%>
			<%--hrefLatter : '.do',--%>
			<%--//这些参数传过去干嘛的--%>
			<%--getLink : function(n){--%>
				<%--return this.hrefFormer + this.hrefLatter + "?pageIndex="+n+"&searchTxt="+$(".search_text").val();--%>
			<%--}--%>
		<%--});--%>
		

		<%--$(".add").click(function(){--%>
			<%--window.location.href="${ctx}/equip/equipEdit.do";--%>
		<%--});--%>
		$("#checkall").click(function(){
	   		   if(this.checked){
	   		        $("input[name='sendId']").prop('checked', true)
	   		    }else{
	   		        $("input[name='sendId']").prop('checked', false)
	   		    }

		    });
		
		<%--$(".edit").click(function(){--%>
			<%--var chk_value = getSelRecord();--%>
			<%--if(chk_value.length == 1){--%>
				<%--window.location.href="${ctx}/equip/equipEdit.do?equipId="+chk_value[0];--%>
			<%--}else{--%>
				<%--layer.msg("请选择并只能选择一条数据！");--%>
			<%--}--%>
		<%--});--%>
		
		<%--$(".del").click(function(){--%>
			<%--var chk_value = getSelRecord();--%>
			<%--if(chk_value.length > 0){--%>
				<%--layer.confirm('你确定要删除么？', function(){--%>
					<%--$.ajax({--%>
			             <%--type: "POST",--%>
			             <%--url:"${ctx}/equip/equipDelete.do?equipId="+chk_value.join(),--%>
			             <%--error: function(request) {--%>
			            	 	<%--layer.alert("网络故障，请稍后再试!");--%>
			             <%--},--%>
			             <%--success: function(data) {--%>
			 	           	<%--if(data.status=="true"){--%>
				 	           	<%--layer.alert("删除成功", function(){--%>
				 	           		<%--window.location.reload();--%>
					 	           	<%--$('input[name="key"]').each(function(){--%>
				 	           			<%--$("input[name='key']").prop('checked',false);--%>
				 	           		<%--});--%>
			           		    <%--});--%>
			 	           	<%--}else{--%>
			 	           		<%--layer.msg(data.msg);--%>
			 	           	<%--}--%>
			             <%--}--%>
			         <%--});--%>
				<%--});--%>
			<%--}else{--%>
				<%--layer.msg('请选择要删除的数据！');--%>
			<%--}--%>
		<%--});--%>
	});

    function  callbackfunction() {
        vm.load();
    }
	
	function getSelRecord(){
		var chk_value =[];
		$('input[name="sendId"]:checked').each(function(){
			chk_value.push($(this).val()); 
		});
		return chk_value;
	}  
	
  	function getParameter(name) { 
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
		var r = window.location.search.substr(1).match(reg); 
		if (r!=null) return unescape(r[2]); return null;
	}
</script>
</html>